<!--
 * @Author: your name
 * @Date: 2021-10-19 15:58:49
 * @LastEditTime: 2021-10-22 21:34:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vuec:\Users\86131\Desktop\project\payforknowledge\src\views\pay.vue
-->
<template>
  <div class="bg">
    <van-nav-bar
      title="支付"
      left-arrow
      @click-left="onClickLeft"
      :fixed="true"
    />
    <main>
      <div class="booklist">
        <div class="content">
          <van-list
            :loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            v-for="item in shop"
            :key="item.id"
          >
            <div>
              <van-card
                :price="item.price"
                :title="item.title"
                :thumb="item.imgUrl"
              />
            </div>

            <van-cell v-for="item in list" :key="item" :title="item" />
          </van-list>
        </div>
      </div>
      <div class="purchase">
        <div class="discounts">
          <div class="dis-left">
            <span>优惠券</span>
            <i>|</i>
          </div>
          <div class="dis-right">
            <span class="minus">-5.00元</span>
            <span class="more" @click="fn">更多</span>
          </div>
        </div>
        <div class="manner">
          <div class="man-left">
            <span>优惠券</span>
            <i>|</i>
          </div>
          <div class="man-right">
            <span class="minus">支付宝</span>
            <span class="more">更多</span>
          </div>
        </div>
        <div class="tips">
          <p>
            · 您将购买的商品为虚拟内容服务，购买后不支持退订、转让、退换、请斟酌
            购买。
          </p>
          <p>· 购买后可在 「我的-订单」中查看。</p>
        </div>
      </div>
    </main>

    <van-submit-bar
      :price="(price - 5) * 100"
      button-text="确认支付"
      @submit="onSubmit"
      button-color="#4AB8FA"
      label="应支付："
    >
    </van-submit-bar>
  </div>
</template>

<script>
import { NavBar, List, Card, SubmitBar, Toast } from "vant";
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";

export default {
  components: {
    VanNavBar: NavBar,
    VanList: List,
    VanSubmitBar: SubmitBar,
    VanCard: Card,
  },
  setup() {
    const onSubmit = () => Toast.loading("加载中");
    const router = useRouter();
    const route = useRoute();
    let price = ref(0);
    let index = [];
    let shopList = [];
    let shop = [];

    shopList = JSON.parse(route.query.shopList);
    console.log(JSON.parse(route.query.shopList));
    price = route.query.price;
    index = route.query.index;
    console.log(route.query.index);
    index.forEach((el) => {
      shop.push(shopList[el]);
      console.log(shop);
    });
    const fn = () => {
      Toast.fail("没有更多了");
    };
    const onClickLeft = () => {
      router.go(-1);
    };
    const value = ref([10, 20]);
    const list = ref([]);
    const error = ref(false);
    const loading = ref(false);
    const onLoad = () => {};
    return {
      value,
      onClickLeft,
      list,
      price,
      index,
      shop,
      fn,
      error,
      onLoad,
      loading,
      shopList,
      onSubmit,
    };
  },
};
</script>

<style lang="less" scoped>
main {
  margin-top: 45px;
  margin-bottom: 120px;
  overflow: auto;
}
/deep/.van-nav-bar__content {
  background: #4ab8fa;
  .van-icon-arrow-left {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
.booklist {
  .content {
    width: 95%;
    margin: 0 auto;
    border-bottom: 1px solid rgb(235, 235, 235);
  }
}
/deep/.van-submit-bar__text {
  text-align: left;
}
.purchase {
  padding-top: 10px;

  .discounts,
  .manner {
    display: flex;
    justify-content: space-between;
    width: 350px;
    height: 50px;
    margin: 0 auto;
    border-radius: 19px;

    padding: 15px 20px;
    color: #fff;
  }
  .discounts {
    background-color: #ff7c35;
    .dis-left,
    .dis-right {
      font-size: 18px;
      span {
        vertical-align: middle;
      }
      i {
        margin-left: 20px;
      }
      .minus {
        margin-right: 10px;
        font-size: 20px;
      }
      .more {
        font-size: 12px;
      }
    }
  }
  .manner {
    margin-top: 30px;
    background-color: #4ab8fa;
    .man-left,
    .man-right {
      font-size: 18px;
      span {
        vertical-align: middle;
      }
      i {
        margin-left: 20px;
      }
      .minus {
        margin-right: 10px;
        font-size: 20px;
      }
      .more {
        font-size: 12px;
      }
    }
  }
  .tips {
    width: 350px;
    height: 50px;
    margin: 10px auto;
    p {
      font-size: 12px;
      color: #909090;
    }
  }
}

/deep/.van-submit-bar__bar {
  background: #fff;
  .van-submit-bar__button--danger {
    .van-button__text {
      font-size: 18px;
      color: #fff;
    }
  }
  .van-submit-bar__text {
    color: #000;
    .van-submit-bar__price {
      color: #000;
    }
  }
}
</style>
